<template>
  <div class="send_view" :active="active">
    <div class="edit_box">
      <div contenteditable="true" placeholder="聊天内容" @focus="active = true" @blur="active = false" class="edit" ref="edit" @keydown="editKeyDown($event)" @keyup.enter="send"></div>
    </div>
    <div class="send_btn">
      <div class="tool">
        <div class="emoji" @mouseenter="isEmoji=true" @mouseleave="isEmoji=false" title="添加表情">
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-biaoqing'></use>
          </svg>
          <emoji-vue v-show="isEmoji" @addEmoji="addEmoji" class="img"></emoji-vue>
        </div>
        <div class="image">
          <label for="file" title="上传图片">
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-a-tupian'></use>
            </svg>
          </label>
          <input id="file" @change="sendImage" style="display:none" type="file">
        </div>
      </div>
      <button @click="send">发送[enter]</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import emojiVue from "../../info/emoji.vue"
export default {
  name: 'Sendview',

  data() {
    return {
      isEmoji: false, // 显示emoji图标
      active: false
    };
  },

  methods: {
    // 添加emoji
    addEmoji(src){
      let edit = this.$refs.edit
      console.log(edit,src)
      edit.innerHTML += `<img src='${src}' />`
      this.isEmoji = false
    },
    // 发送消息
    send(){
      const content = this.$refs.edit.innerHTML
      if(content.trim() == ''){
        this.showHint({title:'不能发送空消息!',isFlag:false})
        return
      }
      this.$parent.message = {...this.$store.state.userinfo,content}
      this.$emit('send',content)
      this.$refs.edit.innerHTML = ''
    },
    // 发送图片
    sendImage(e){
      let file = e.target.files[0]
      console.log(file)
      if(file.size > 2 * 1024 * 1024){
        this.showHint({title:'不要上传大于2M的图片!',isFlag: false})
        return
      }else if(file.type.indexOf('image') == -1){
        this.showHint({title: '只能上传图片喔!',isFlag: false})
        return
      }
      let reader =  new FileReader()
      reader.readAsDataURL(file)
      let edit = this.$refs.edit
      let img = document.createElement('img')
      img.width = 80
      e.target.disabled = true
      reader.onload = () => {
        img.src = reader.result
        edit.append(img)
        e.target.disabled = false
        e.target.value = ''
      }
      
    },
    // 取消换行符
    editKeyDown(e){
      if(e.keyCode == 13)
        e.preventDefault()
    },
    ...mapActions(['showHint'])
  },

  components: {
    emojiVue
  }
};
</script>

<style scoped>
.send_view{
  width: 100%;
  display: flex;
  margin-top: 10px;
  position: relative;
  border: 1px solid gray;
  background-color: white;
  transition: all .3s ease;
  border-radius: 4px;
}
.send_view .send_btn{
  padding: 10px;
  width: 100px;
  background-color: white;
}
.send_btn .tool{
  display: flex;
}
.send_view .edit_box{
  width: 100%;
  overflow: hidden;
}
.send_view .edit{
  width: 102%;
  height: 80px;
  overflow-y: scroll;
  outline: none;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  align-items: flex-end;
}
.send_view[active] {
  border: 1px solid rgb(0, 102, 255);
  box-shadow: 0 0 4px rgb(71, 71, 255);
}
.send_view button{
  padding: 6px 10px;
  color: rgb(209, 209, 209);
  background-color: green;
  position: absolute;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  font-size: 0.6rem;
}
.send_view button:hover{
  color: white;
}
.emoji,.image{
  display: inline-block;
  font-size: 1.5rem;
  cursor: pointer;
  position: relative;
  margin-right: 4px;
}
.emoji .img{
  position: absolute;
  top: -100px;
  left: -100px;
  z-index: 99;
}
@media screen and (max-width:800px){
  .emoji .img{
    left: -240px;
  }
}
</style>